<template>
  <div class="nav">
    <div>
      <img class="logo_img" src="@/assets/logo.png" />
      <div class="nav-contact">
        <img src="@/assets/phone.png" />
        <div @click="showLoginDialog">登录</div>
      </div>
    </div>
    <Teleport to="body">
      <transition name="fade">
        <el-dialog v-model="dialogVisible" title="登录" width="30%" center>
          <el-form :model="form" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="hideLoginDialog">取消</el-button>
              <el-button type="primary" @click="submitLogin">登录</el-button>
            </span>
          </template>
        </el-dialog>
      </transition>
    </Teleport>
  </div>
</template>
<script setup lang="ts">
import { useRouter} from 'vue-router';
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
const router = useRouter();

const dialogVisible = ref(false);
const form = ref({
  username: '',
  password: ''
});

// Show the login dialog
const showLoginDialog = () => {
  dialogVisible.value = true;
};

// Hide the login dialog
const hideLoginDialog = () => {
  dialogVisible.value = false;
  form.value = {
    username: '',
    password: ''
  };
};

// Submit the login information
const submitLogin = () => {
  if(form.value.username=="admin" && form.value.password=="admin"){
    router.push({ name: 'newsfabu' });
  }else{
    ElMessage.error('账号密码错误');
  }

};

</script>
<style lang="scss" scoped>
.nav {
  width: 100%;
  height: 6.25rem;
  background-color: #ffffff;
  // padding: 0 22.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  > div {
    width: 75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo_img {
    width: 30rem;
    height: 6.5rem;
  }
  .nav-contact {
    display: flex;
    cursor: pointer;
    img {
      width: 1.25rem;
      height: 1.25rem;
    }
    div {
      font-size: 1rem;
      color: #3f50bd;
      margin-left: 0.5rem;
    }
  }
}
.login-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-dialog-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
